<template>
	<view class="user-order-details b-box">
		<!-- 用户订单详情 -->
		<u-navbar
			leftIconSize="34rpx"
			leftIconColor="#ffffff"
			autoBack
			:placeholder="false"
			bgColor="rgba(255,255,255,0)"
		>
			<view class="" slot="center">
				<text class="c-fff pf-sc fw-600" style="font-size: 34rpx;">商城订单</text>
			</view>
		</u-navbar>
		<view
		v-if="orderDeatails"
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: screenHeight }"
		>
			<view
				style="height:650rpx;background: linear-gradient(180deg, #4885C5 0%, #ffffff 100%);z-index: 9;top: 0;right: 0;left: 0;"
				class="w-100 po-ab b-box"
			></view>
			<view
				class="w-100 b-box po-re"
				:style="{ height: containerHeight, top: containerTop }"
				style="z-index: 12;"
			>
				<scroll-view
					scroll-y="true"
					style="z-index: 13;"
					class="po-re"
					:style="{ height: containerHeight }"
				>
					<view class="w-100 b-box po-re" style="z-index: 12;padding: 0 32rpx;">
						<view
							class="w-100 b-box d-flex flex-r ali-i-c just-s"
							style="height: 126rpx;padding-left: 62rpx;"
						>
						<text v-if="orderDeatails.shopstatus==0" class="pf-sc fw-600 c-fff" style="font-size: 48rpx;">待付款</text>
						<text v-if="orderDeatails.shopstatus==1" class="pf-sc fw-600 c-fff" style="font-size: 48rpx;">待发货</text>
						<text v-if="orderDeatails.shopstatus==2" class="pf-sc fw-600 c-fff" style="font-size: 48rpx;">待收货</text>
						<text v-if="orderDeatails.shopstatus==3" class="pf-sc fw-600 c-fff" style="font-size: 48rpx;">订单已完成</text>
						<text v-if="orderDeatails.shopstatus==4" class="pf-sc fw-600 c-fff" style="font-size: 48rpx;">订单已取消</text>
						</view>
						<view
							class="w-100 b-box po-re"
							style="margin-bottom: 20rpx;background-color: rgba(255,255,255,0);z-index: 12;"
							v-if="orderDeatails.shopstatus==2 || orderDeatails.shopstatus==3"
						>
							<view
								style="padding:0 28rpx;overflow: hidden;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;"
								class="d-flex flex-c ali-i-c just-s w-100 b-box bg-ff"
							>
								<!--  -->
								<view style="height: 116rpx;" class="w-100 d-flex flex-r ali-i-c just-sw"> 
									<view class="d-flex flex-r ali-i-c just-s">
										<image
											:src="require('../static/ns.png')"
											style="width: 52rpx;height: 52rpx;margin-right: 8rpx;"
										></image>
										<text class="pf-sc fw-400 " style="font-size: 26rpx;color: #666666;">
											{{ orderDeatails.express }} {{ orderDeatails.kdno }}
										</text>
									</view>
									<text
										class="fw-400 pf-sc "
										style="font-size: 26rpx;color: #666666;"
										@click="Copy(orderDeatails.kdno)"
									>
										复制
									</text>
								</view>
								<!--  -->
								<view
									class=" w-100 b-box d-flex flex-r ali-i-c just-s"
									:class="{ showmore: readMore, hidemore: !readMore }"
								>	
								
								</view>
							</view>
							<!--  -->

						</view>
						<!--  -->
						<view
							class="w-100 b-box bg-ff d-flex flex-c ali-i-s just-s"
							style="height: 244rpx;border-radius: 16rpx;padding: 32rpx 32rpx 28rpx;margin-bottom: 20rpx;"
						>
							<view class="w-100 d-flex flex-r ali-i-c just-s">
								<text class="pf-sc fw-500 c-333" style="font-size: 34rpx;margin-bottom: 38rpx;">
									收货信息
								</text>
							</view>
							<view style="flex: 1;" class=" d-flex flex-c ali-i-s just-sw">
								<view class=" d-flex flex-r ali-i-c just-s w-100">
									<u-badge
										:show="true"
										:customStyle="{
											marginRight: '8rpx',
											borderRadius: '6rpx',
											padding: '8rpx 6rpx'
										}"
										type="warning "
										bgColor="#FBB704"
										color="#ffffff"
										shape="horn"
										max="1"
										value="收货地址"
									></u-badge>
									<text>{{ orderDeatails.sname }}</text>
									<text>{{ orderDeatails.smobile }}</text>
								</view>
								<view class="d-flex flex-r ali-i-c just-s">
									<text style="font-size: 28rpx;color: #666666;" class="pf-sc fw-400">
										{{ orderDeatails.address }}
									</text>
								</view>
							</view>
						</view>
						<!--  -->
						<view
							class="w-100 b-box bg-ff d-flex flex-c ali-i-s just-s"
							style="border-radius: 16rpx;padding: 32rpx 32rpx 28rpx;margin-bottom: 20rpx;"
						>
							<view class="w-100 d-flex flex-r ali-i-c just-s" style="margin-bottom: 32rpx;">
								<text class="pf-sc fw-500 c-333" style="font-size: 34rpx;">订单信息</text>
							</view>
							<!--  -->
							<view style="min-height: 146rpx;" class=" b-box d-flex flex-r ali-i-c just-s">
								<!--  -->
								<view class="d-flex flex-c b-box w-100">
									<view
										style="min-height: 146rpx;border-bottom: 2rpx solid #eeeeee;margin-bottom: 16rpx;padding-bottom: 32rpx;"
										class=" b-box d-flex flex-r ali-i-c just-s"
									>
										<view
											style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
											class="b-box"
										>
											<image
												:src="orderDeatails.goods[0].images"
												style="width:140rpx ;height:140rpx"
											></image>
										</view>
										<!--  -->
										<view
											style="width: 490rpx;height: 140rpx;"
											class="b-box d-flex flex-c ali-i-s just-s"
										>
											<view
												class="d-flex flex-r ali-i-c just-sw b-box"
												style="margin-bottom: 8rpx;"
											>
												<text class="fw-500 pf-sc c-333 fz-32">
													{{ orderDeatails.goods[0].goodsname }}
												</text>
											</view>
											<view
												class="d-flex flex-c ali-i-s just-s b-box"
												style="min-height: 70rpx;width: inherit;padding-right: 26rpx;"
											>
												<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
													<text
														class="pf-sc fw-300"
														style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
													>
														{{ orderDeatails.goods[0].ggname }}
													</text>
													<text
														class="pf-sc fw-300"
														style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
													>
														×{{ orderDeatails.goods[0].num }}
													</text>
												</view>
												<view class="b-box d-flex flex-r ali-i-c just-s">
													<text
														class="pf-sc fw-500 po-re"
														style="font-size: 22rpx;color: #FF5C00;top:4rpx"
													>
														¥
													</text>
													<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
														{{ orderDeatails.goods[0].price }}
													</text>
												</view>
											</view>
										</view>
										<!--  -->
									</view>
									<view style="height: 106rpx;" class="w-100 b-box d-flex flex-r ali-i-c just-e">
										<view style="height: inherit;" class=" d-flex flex-c ali-i-e just-s w-100">
											<view
												class=" d-flex flex-r ali-i-c just-sw w-100"
												style="margin-bottom: 32rpx;"
											>
												<text
													style="margin-right: 16rpx;font-size: 28rpx;color: #666666;"
													class="pf-sc fw-400 "
												>
													总价：
												</text>
												<text
													style="margin-right: 16rpx;font-size: 28rpx;color: #666666;"
													class="pf-sc fw-400 "
												>
													{{ orderDeatails.goods[0].tprice }}
												</text>
											</view>
											<view class="d-flex flex-r ali-i-c just-e w-100">
												<text
													style="font-size: 28rpx;margin-right: 10rpx;"
													class="pf-sc fw-500 c-333"
												>
													实付款
												</text>
												<text
													style="font-size: 28rpx;color:#FF5C00;margin-right: 20rpx;"
													class="pf-sc fw-600"
												>
													¥{{ orderDeatails.money }}
												</text>
											</view>
										</view>
									</view>
								</view>
								<!--  -->
							</view>
						</view>
						<!--  -->
						<view
							class="w-100 b-box bg-ff d-flex flex-c ali-i-s just-s"
							style="height: 336rpx;border-radius: 16rpx;padding: 32rpx 32rpx 28rpx;margin-bottom: 20rpx;"
						>
							<view class="w-100 d-flex flex-r ali-i-c just-s">
								<text class="pf-sc fw-500 c-333" style="font-size: 34rpx;margin-bottom: 38rpx;">
									其它信息
								</text>
							</view>
							<view style="flex: 1;" class=" d-flex flex-c ali-i-s just-sw">
								<text class="pf-sc fw-400 c-333" style="font-size: 28rpx;margin-bottom: 20rpx;">
									订单号：{{ orderDeatails.orderno }}
								</text>
								<text class="pf-sc fw-400 c-333" style="font-size: 28rpx;margin-bottom: 20rpx;">
									订单时间：{{ orderDeatails.createtime }}
								</text>
								<text class="pf-sc fw-400 c-333" style="font-size: 28rpx;margin-bottom: 20rpx;">
									支付方式：{{orderDeatails.paytype===1 ? '微信支付' : '余额支付'}}
								</text>
								<text class="pf-sc fw-400 c-333" style="font-size: 28rpx;margin-bottom: 20rpx;">
									订单备注：{{orderDeatails.remarks}}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	_containerHeight,
	_screenHeight,
	_addUnit,
	_rpxTpx,
	_statusBarHeight,
	_navHeight
} from '@/utils/GetSys.js';
import { shoporderdetail } from '@/common/api.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import uSteps from '../components/uview-ui/components/u-steps/u-steps';
import uStepsItem from '../components/uview-ui/components/u-steps-item/u-steps-item';
import uBadge from '../components/uview-ui/components/u-badge/u-badge';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-steps': uSteps,
		'u-steps-item': uStepsItem,
		'u-badge': uBadge
	},
	data() {
		return {
			id: null, //保存订单页面传来的订单id 通过id发送请求
			screenHeight: '',
			containerHeight: '',
			orderDeatails: '',
			containerTop: '',
			readMore: false,
			shadowStyle: {
				backgroundImage: 'none',
				paddingTop: '0',
				marginTop: '20rpx'
			}
		};
	},
	methods: {
		Copy(data) {
			//复制订单号 ，
			uni.setClipboardData({
				data: data,
				showToast: false,
				success: function() {
					uni.$u.toast('复制成功');
				}
			});
		},
		getData() {
			// console.log(this.id);
			//发送请求
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.id
			};
			shoporderdetail(params).then(res => {
				this.orderDeatails = res.data.data;
				console.log(res.data);
			});
		}
	},
	onLoad(options) {
		//将传来的订单id赋值给本地的id发送请求
		this.id = options.id;
		this.getData();
		this.screenHeight = _addUnit(_screenHeight(), 'px');
		this.containerHeight = _addUnit(_containerHeight(), 'px');
		this.containerTop = _addUnit(_statusBarHeight() + _navHeight(), 'px');
	}
};
</script>

<style lang="scss">
.user-order-details {
	.showmore {
		height: 500rpx !important;
	}
	.hidemore {
		height: 0rpx !important;
		overflow: hidden !important;
	}
	.u-steps-item__content--column {
		margin-left: 20rpx !important;
		margin-top: -8rpx !important;
		height: 120rpx !important;
		.u-text {
			flex: none !important;
		}
	}
	.u-steps-item {
	}
	.u-steps {
		width: 100% !important;
	}
	.u-steps-item__wrapper--column--dot {
		width: 20rpx !important;
		height: 20rpx !important; //dot
	}
	.u-steps-item__wrapper__dot {
		width: 20rpx !important;
		height: 20rpx !important; //dot
	}
	.u-steps-item__line--column {
		left: 10rpx !important;
	}
	.u-steps--column {
		min-height: 300rpx;
		.u-steps-item--column {
			.u-text__value--content {
				font-size: 26rpx !important; //标题
			}
			.u-text__value--tips {
				font-size: 26rpx !important; //时间
			}
		}
	}
	.u-text__value {
		font-size: 30rpx !important;
		font-family: PingFang SC-Medium, PingFang SC !important;
		font-weight: 500 !important;
		color: #333333 !important;
	}
}
</style>
